<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 

  这个案例是当我们点击按钮会在中间插入一个f；
  我们可以确定需要更新的是li的列表
    在vue中，对于相同父元素的子元素节点并不会重新渲染整个列表
    对于列表a,b,c,d他们都是没有变化的
    在操作真实dom时，我们只需要在中间插入一个f的li即可

  **那么Vue中对于列表的更新究竟是如何操作的呢？
    .Vue事实上对于有key和没有key会调用两种不同的方法
    .有key，那么就使用patchKeyedChildren方法
    .没有key,那么就使用pathchUnkeyChildren方法


  **Vue源码对于key的判断
      没有key的过程如下
        当点击按钮，c会被替换成f，后续所有内容都要进行一次改动，并且最后进行新增
      
      有key执行操作
        1.第一步的操作是从头开始进行遍历，比较（新的虚拟DOM和旧的虚拟DOM）：
          a和b是一致的会继续进行比较；
          c和f因为key不一致，所以会break跳出循环；
        3.如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点
        4.如果新的节点遍历完毕，但是依然有旧的节点，那么就移除就节点
        5.最有特点的情况，中间还有很多未知的或者乱序的节点
        
 -->

    <div id="app">
      <button @click="insertF">插入f</button>
      <ui>
        <!-- key要求是唯一的：ID -->
        <!-- 绑定key是为了让vue尽可能知道那些数据可以复用，让vue快速的识别出来是不是同样的东西 -->
        <li v-for="item in letters" :key="item">{{item}}</li>
      </ui>
    </div>

    <script src="./lib/Vue.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return{
                  letters:["a",'b','c','d','e']
                }
            },
            methods: {
              // 插入东西时会发生什么变化
              insertF() {
                this.letters.splice(2,0,"f")
              }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>